<template>
  <e-group class="cascader-group" :value="myValue" :simple-layout="true" @add="handleAdd" @remove="handleRemove" :max-item="20">
    <template slot-scope="scope">
      <el-row style="width:520px;vertical-align: middle;display:inline-block">
        <el-col :span="17">
          <el-cascader 
            ref="cascader"
            change-on-select
            v-bind="$props" 
            :value="scope.item.value" 
            :options="optionsTree"
            :disabled="scope.item.signupType === 0"
            @change="handleChange(scope.index, $event)" 
            @active-item-change="handleItemChange"/>
        </el-col>
        <el-col :span="2" style="margin-left:21px; color:rgb(72, 106, 103)">学费：</el-col>
        <el-col :span="4">
         <e-input-money v-model="scope.item.signupFee" :disabled="scope.item.signupType === 0" @change="handleInput(scope.index, $event)"/>
        </el-col>
      </el-row>
    </template>
  </e-group>
</template>
<script>
import EInputMoney from '@e-ui/InputMoney'
import {Cascader} from '@element-ui'
import EGroup from '@e-ui/Group'
import { mapGetters } from 'vuex'
import trainApi from 'api/train'
export default {
  components: {
    EGroup,
    EInputMoney
  },
  props: {
    ...Cascader.props,
    ...Group.props,
    value: {},
    options: {
      type: Array,
      required: false
    }
  },
  computed: {
    ...mapGetters({
      train_student_info: 'train_student_info', // 学员信息'
      train_selectclass_list: 'train_selectclass_list' // 所有课程
    })
  },
  data () {
    let myValue = this.options
    if (!this.options || this.options.length === 0) {
      myValue = [{signupFee: 0, value: []}]
    } else {
      myValue = this.options
    }
    return {
      selectedOptions: [],
      myValue,
      optionsTree: [],
      signupFee: '',
      displayInfo: []
    }
  },
  mounted () {
    if (this.$route.path === '/training/student/edit') {
      trainApi.studentInfo({studentId: this.$route.query.id}).then(res => {
        this.displayInfo = res.data.trainStudentSignupVOs.map((item, index) => {
          return [item.courseId, item.schoolId, item.classesId]
        })
        this.displayInfo.forEach(item => {
          this.handleArray(item)
        })
      })
    }
    this.$store.dispatch('train_selectclass_list')
  },
  watch: {
    train_selectclass_list (value) {
      this.optionsTree = value.map((item, index) => {
        return {
          value: item.id,
          label: item.courseName,
          children: []
        }
      })
    },
    options (value) {
      this.myValue = value
    }
  },
  methods: {
    handleAdd (index) {
      this.myValue.push({signupFee: 0, value: []})
    },
    handleRemove (index) {
      this.myValue.splice(index, 1)
      this.$emit('change', this.myValue).$emit('input', this.myValue)
    },
    handleChange (index, value) {
      let myValue = Object.assign([], this.myValue)
      this.selectedOptions[index] = value
      myValue[index].value = value
      this.$emit('change', myValue).$emit('input', myValue)
    },
    handleInput (index, value) {
      let myValue = Object.assign([], this.myValue)
      myValue[index].signupFee = value
      this.$emit('change', myValue).$emit('input', myValue)
    },
    handleItemChange (value, cb) {
      if (value.length === 1) {
        trainApi.getSchoolList({courseId: value[0]}).then(res => {
          value.forEach(i => {
            this.optionsTree.forEach(item2 => {
              if (i === item2.value) {
                item2.children = res.data.length ? res.data.map(item3 => {
                  return {
                    value: item3.key,
                    label: item3.value,
                    children: []
                  }
                }) : []
              }
            })
          })
          cb && cb()
        })
      } else if (value.length === 2) {
        trainApi.getClasstypeList({courseId: value[0]}).then(res => {
          value.forEach(i => {
            this.optionsTree.forEach(item2 => {
              if (i === item2.value) {
                item2.children.forEach(item3 => {
                  item3.children = res.data.length ? res.data.map(item3 => {
                    return {
                      value: item3.key,
                      label: item3.value
                    }
                  }) : []
                })
              }
            })
          })
          cb && cb()
        })
      }
    },
    handleArray (array) {
      let index = 1
      let fn = () => {
        if (array[index]) {
          this.handleItemChange(array.slice(0, index), fn)
          index++
        }
      }
      fn()
    }
  }
}
</script>

<style lang="scss">
    
    .cascader-group {
      .el-cascader{
        width: 98%!important;
      }
      .el-input-number{
        width: 100%;
      }
    }
</style>
